<template>
  <div>
    <!-- Element UI:对话框 -->
    <el-dialog :title="curmid==''?'添加菜单':'修改菜单'" :visible.sync="formObj.isshow" @closed="resetForm">
      <el-form :model="form">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="请选择上级菜单">
            <el-option label="-请选择-" :value=0 selected></el-option>
            <el-option
              v-for="items in menuArr"
              :key="items.id"
              :label="items.title"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="form.type" :label=1>目录</el-radio>
          <el-radio v-model="form.type" :label=2>菜单</el-radio>
        </el-form-item>
        <el-form-item
          v-show="form.type == '1'"
          label="菜单图标"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.icon" placeholder="请选择菜单图标">
            <el-option
              v-for="(item, ind) in iconArr"
              :key="ind"
              :label="item"
              :value="item"
            >
              <template>
                <i :class="item"></i>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="form.type == '2'"
          label="菜单地址"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- 
            active-value:switch开关启用时的值
            inactive-value:switch开关禁用时的值
           -->
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button v-if="curmid==''" type="primary" @click="addMenu">添加</el-button>
        <el-button v-else type="primary" @click="updateOneMenu">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addOneMenu,getOneMenuData,updateOneMenuData } from "../../../request/api.js";

export default {
  props: ["formObj", "menuArr"],
  data() {
    return {
      formLabelWidth: "120px",
      iconArr: [
        "el-icon-setting",
        "el-icon-user-solid",
        "el-icon-s-grid",
        "el-icon-shopping-bag-1",
      ],
      curmid:'',//要修改的菜单id
      form: {
        pid: 0, //上级菜单id
        title: "", //菜单名称
        type: "1", //菜单类型 1为目录  2为菜单
        icon: "", //菜单图标
        url: "", //菜单地址
        status: 1, //状态  1正常2禁用
      },
    };
  },
  methods: {
    //根据要修改的菜单id修改菜单数据
    updateOneMenu(){
         let obj = {
          id:this.curmid,  //要修改的菜单id
          ...this.form
         };
         this.curmid = '';//重置菜单id为空
        updateOneMenuData(obj).then(d=>{
          //重置表单数据：
          this.resetForm();
          if(d.data.code == 200){
            this.$message({
              message: "菜单修改成功",
              type: "success",
            });
          }else{
            this.$message({
              message: "菜单修改失败",
              type: "warning",
            });
          }
        }).catch(e=>{
              this.$message({
              message: "菜单修改失败!!!!",
              type: "warning",
            });
        })
    },
    //根据要修改的菜单id查询菜单数据
    getOneMenuInfo(id){
        this.curmid = id;
         getOneMenuData({id}).then(d=>{
          console.log(d,'d.....');
          if(d.data.code == 200){
            this.form = d.data.list
          }
         }).catch(e=>{
          console.log(e,'e');
         });
    },
    //初始化表单数据
    resetForm() {
      //刷新列表中菜单数据
      this.$emit('refreshData');
       this.formObj.isshow = false;//隐藏对话框
      //重置表单数据：
      this.form = {
        pid: 0, //上级菜单id
        title: "", //菜单名称
        type: "1", //菜单类型 1为目录  2为菜单
        icon: "", //菜单图标
        url: "", //菜单地址
        status: 1, //状态  1正常2禁用
      };
    },
    addMenu() {
      //添加菜单

      if (this.form.type == 2) {
        //菜单类型为菜单
        this.form.icon = "";
      } else {
        //菜单类型为目录
        this.form.url = "";
      }

      //调用添加菜单接口：
      addOneMenu(this.form)
        .then((d) => {
          if (d.data.code == 200) {//添加成功
            //重置表单数据：
            this.resetForm();
            this.$message({
              message: "菜单添加成功",
              type: "success",
            });
          } else { //添加失败
            //重置表单数据：
            this.resetForm();
            this.$message({
              message: "菜单添加失败",
              type: "error",
            });
          }
        }).catch((e) => {
            //重置表单数据：
            this.resetForm();
            this.$message({
              message: "添加菜单接口调用失败！",
              type: "warning",
            });          
        });
    },
  },
};
</script>

<style>
</style>